<!--
 * @Description: 三餐打卡的显示
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-13 15:23:35
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-22 19:29:43
 -->
<template>
  <div>
    <div class="diet-content">
      <div v-if="dietData.id">
        <div class="diet-note">
          <p><label>打卡时间：</label>{{ dietData.time }}</p>
          <div v-if="dietData.nutris !== null && dietData.nutris !== ''">
            <!-- JSON 数据循环 nutris 字段 -->
            <p v-for="(item, index) in nutriItem" :key="index">
              <label>{{ dietData.nutris[item].name }}：</label><span v-for="(elment, index) in dietData.nutris[item].elments" :key="index" class="tag">{{ elment.label }}</span>
            </p>
          </div>
          <p v-if="dietData.note"><label>备注：</label>{{ dietData.note }}</p>
        </div>
        <div class="diet-img">
          <ul class="sign">
            <li v-for="(img,index) in dietData.img" :key="index">
              {{img}}{{index}}
              <el-image style="width: 200px; height: 220px" :src="img" :preview-src-list="dietData.img" />
              <!-- <img :src="" @click="bigShow(img.url)"> -->
            </li>
          </ul>
        </div>
      </div>
      <div v-else class="diet-note">
        未打卡
      </div>
    </div>
    <div class="comment-content">
      <div class="comment-input">
        <div class="input-group">
          <label class="elabel"><i>*</i>评价：</label>
          <div class="input-group-box" style="margin-top: 2px;width: 100%;">
            <el-input v-if="otherShow" v-model="others" :autosize="{ minRows: 4, maxRows: 4}" type="textarea" placeholder="请输入评价内容" />
          </div>
        </div>
        <div class="submit-comment">
          <el-button :disabled="!dietData.id" class="comment-btn" style="margin-right:50px;" @click="insideEvalation('comment', mealType)">确定</el-button>
        </div>
      </div>
      <div class="comment-list">
        <div v-if="dietData.id" class="evaluate-item">
          <span class="comment-item-tit">评价：</span>
          <div>
            <div class="evaluate-content">
              <p v-for="(item,index) in dietData.comment_list" :key="index">
                <span class="reply-name">{{ item.sender_name }}</span>
                <span v-if="item.receiver_id!==0">回复</span>
                <span v-if="item.receiver_id!==0" class="reply-name">{{ item.receiver_name }}</span>
                <span>：{{ item.content }}</span>
                <span class="add_time">{{ item.add_time }}</span>
                <span v-if="item.type !== 0" class="icon-reply" @click="replyUser(item)" />
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="clear" />
    <el-dialog :visible.sync="reply.visibleReplyUser" title="回复客户信息">
      <div class="input-group">
        <label>客户信息：</label>
        <div class="input-group-box">{{ reply.origin }}</div>
      </div>
      <div class="input-group">
        <label>我的评论：</label>
        <div class="input-group-box">
          <el-input v-model="reply.content" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="输入您要回复的内容" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button :plain="true" @click="reply.visibleReplyUser=false">取 消</el-button>
        <el-button type="primary" @click="confirmReply">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="bigImgShow" class="bigimg" width="500px">
      <img :src="bigImg">
    </el-dialog>
  </div>
</template>

<script>

export default {
  props: {
    dietData: {
      type: Object,
      required: true
    },
    mealType: {
      type: String,
      required: true
    },
    serviceId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      nutriItem: ['cereal', 'meat_category', 'fruit_vegetable', 'nuts', 'fried_food', 'toast_food'],
      otherShow: true, // 营养师评价框的显示与否，本来默认false，因为注释到评论选项而改成默认为true
      others: '', // 评价内容
      reply: {
        visibleReplyUser: false,
        origin: '',
        content: '',
        id: '',
        item_id: '',
        item_type: '',
        sender_id: '',
        sender_name: '',
        receiver_id: '',
        receiver_name: ''
      },
      param: {
        diet_id: '',
        config_id: '',
        custom: '',
        score: '',
        order_id: ''
      },
      bigImgShow: false,
      bigImg: ''
    }
  },
  methods: {
    bigShow(img) {
      this.bigImg = img
      this.bigImgShow = true
    },
    insideEvalation(conttype, diettype) {
      if (conttype === 'score') {
        const reg = /^(?:0|[1-9][0-9]?|100)$/
        if (!reg.test(this.score)) {
          this.$notify({ title: '警告', message: '输入的评分格式不正确', type: 'error', duration: 2500 })
          return false
        } else if (this.score === 0 || this.score === '0') {
          this.$notify({ title: '警告', message: '输入的评分必须大于0', type: 'error', duration: 2500 })
          return false
        }
        this.param.score = this.score
        this.param.custom = 'COMMENT'
      } else if (conttype === 'comment') {
        if (this.others === '' || this.others === null) {
          this.$notify({ title: '警告', message: '您还没有评价', type: 'error', duration: 2500 })
          return false
        }
        this.param.score = 'SCORE'
        this.param.custom = this.others
      }
      this.param.diet_id = this.dietData.id
      this.param.diet_type = diettype
      this.param.config_id = ''
      this.param.service_id = this.serviceId // 因为注释到评论选项而加的
      // 评价成功 为再次调用用户打卡接口 准备参数
      this.$api.punch.punch
        .evaluateDiet({
          data: this.param
        })
        .then(res => {
          this.$notify({ title: '成功', message: '评价成功', type: 'success', duration: 1500 })
          this.param.score = ''
          this.param.custom = ''
          this.param.config_id = ''
          this.score = ''
          this.others = ''
          this.meal = ''
          this.$emit('getDietInfo')
        }).catch(err => {
          console.log(err)
          this.$notify({ title: '失败', message: '评价失败', type: 'error', duration: 2500 })
        })
    },
    replyUser(item) {
      this.reply.content = ''
      this.reply.visibleReplyUser = true
      this.reply.origin = item.content
      this.reply.id = item.id
      this.reply.item_id = item.item_id
      this.reply.item_type = item.item_type
      this.reply.sender_id = item.receiver_id
      this.reply.sender_name = item.receiver_name
      this.reply.receiver_id = item.sender_id
      this.reply.receiver_name = item.sender_name
    },
    confirmReply() {
      const param = {
        id: this.reply.id,
        item_id: this.reply.item_id,
        service_id: this.serviceId,
        item_type: this.reply.item_type,
        sender_id: this.reply.sender_id,
        sender_name: this.reply.sender_name,
        receiver_id: this.reply.receiver_id,
        receiver_name: this.reply.receiver_name,
        custom: this.reply.content
      }
      this.$api.punch.punch
        .replyUser({
          data: param
        })
        .then(res => {
          this.reply.visibleReplyUser = false
          this.$emit('getDietInfo')
          this.$notify({ title: '提示', message: '消息回复成功', type: 'success', duration: 2500 })
        })
        .catch(err => {
          console.log(err)
          this.$notify({ title: '提示', message: '消息回复失败', type: 'error', duration: 2500 })
        })
    },
  }
}
</script>

<style scoped>
.input-group {
  margin: 10px 0;
  display: flex;
}
.input-group label {
  float: left;
  flex: 0 0 100px;
  width: 100px;
  text-align: right;
  font-size: 14px;
  color: #999;
  line-height: 36px;
  padding-right: 15px;
  font-weight: normal;
}
.input-group label i, .p-tip i {
    color: red;
    font-size: 18px;
    margin-right: 8px;
    display: inline-block;
}
.sign {
  font-size: 0;
}
.sign li {
  width: 200px;
  height: 220px;
  position: relative;
  display: inline-block;
  margin: 10px;
  border-radius: 4px;
  overflow: hidden;
}
.sign li img {
  width: 200px;
  height:220px;
}
.diet-note {
  padding: 10px;
  line-height: 1.7;
  font-size: 14px;
}
.diet-note label {
  width: 187px;
  text-align: right;
  display: inline-block;
  margin-right: 4px;
  color: #666;
  font-weight: normal;
  line-height: 20px;
}
.diet-note p {
  padding: 2px 0;
  margin: 0;
}
.diet-note .tag {
  border: 1px solid #20a0ff;
  padding: 2px 15px;
  border-radius: 11px;
  margin-right: 10px;
}
.evaluate-item .evaluate-content {
  margin-left: 70px;
}
.evaluate-item .evaluate-content .add_time {
  display: inline-block;
  margin-left: 20px;
  color: #aaaaaa;
}
.evaluate-item .evaluate-content .icon-reply {
  display: inline-block;
  font-size: 14px;
  color: #1eba56;
  margin-left: 6px;
}
.evaluate-item .evaluate-content .reply-name {
  color: #3cb9fc;
}
.bigimg img{
  width: 100%;
}
@keyframes changeheight{
  0% {
    height: 50px;
  }
  100% {
    height: auto;
  }
}
.diet-content{
  width: 50%;
  float: left;
}
.comment-content{
  width:50%;
  float: left;
}
.clear{
    clear:both;
  }
.comment-content .el-textarea{
    width:80%;
  }
.comment-btn{
  width:200px;
  background:#f7ba2a ;
  color: #fff;;
}
.submit-comment{ text-align: center;}
.comment-item-tit{
  float: left;
  flex: 0 0 100px;
  width: 100px;
  text-align: right;
  font-size: 14px;
  line-height: 36px;
  padding-right: 15px;
}
.evaluate-content{
  display: inline-block;
  padding-top: 5px;
  width: 80%;
}
.comment-list{
  margin-top: 40px;
}
.evaluate-content p{ line-height: 25px;}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
    transform: rotate(180deg) scale(0.6);
    }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
    }
}
</style>